<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="110px" class="layout-all form-width">
      <el-form-item prop="title" label="店铺名称:">
        <el-input v-model="form.title" placeholder="请输入店铺名" />
      </el-form-item>
      <el-form-item prop="account" label="登录账户:">
        <el-input v-model="form.account" placeholder="请输入登录账户" />
      </el-form-item>
      <el-form-item prop="sub_title" label="店铺简称:">
        <el-input v-model="form.sub_title" placeholder="请输入店铺简称" />
      </el-form-item>
      <!-- <el-form-item label="店铺分类">
        <el-select v-model="form.cate_id" placeholder="请选择店铺分类">
          <el-option
            v-for="item in options_cate"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item prop="tel" label="店铺电话:">
        <el-input v-model="form.tel" placeholder="请输入店铺电话" />
      </el-form-item>
      <el-form-item prop="shop_main" label="店主(选填):">
        <el-input v-model="form.user.account" placeholder="请输入店主账号" />
      </el-form-item>
      <el-form-item prop="address" label="店铺地址:">
        <el-input v-model="form.address" placeholder="请输入店铺地址" />
      </el-form-item>
      <el-form-item prop="thumb" label="图标:">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100"/>
        <div style="font-size:12px;">建议尺寸：72X72</div>
      </el-form-item>
      <el-form-item prop="description" label="介绍:">
        <el-input v-model="form.description" placeholder="请输入店铺介绍" />
      </el-form-item>
      <el-form-item prop="is_system" label="是否官方店铺:">
        <el-switch v-model="form.is_system" />
      </el-form-item>
      <el-form-item prop="status" label="上传商品上限:(0为不限)">
        <el-input v-model="form.goods_count" placeholder="请输入上传商品上限" />
      </el-form-item>
      <el-form-item prop="status" label="是否自动审核上传的商品:">
        <el-switch v-model="form.auto_check" />
      </el-form-item>
      <el-form-item prop="status" label="是否启用:">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item label="所属城市">
        <el-cascader v-model="city_ids"  :props="props" style="width: 240px;" @change="is_change=true"></el-cascader>
        <!-- <el-select v-model="form.city_id" placeholder="请选择店铺分类">
          <el-option
            v-for="item in options_ctity"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
      </el-form-item>
      <el-form-item prop="logo" label="主页logo:">
        <upload-pic :thumb="form.logo" @update:thumb="form.logo=$event" width="100"/>
      
        <div style="font-size:12px;">建议尺寸：72X72</div>
      </el-form-item>
      <el-form-item prop="background" label="主页背景:">
        <upload-pic :thumb="form.background" @update:thumb="form.background=$event" width="350" heigth="175"/>
       <div style="font-size:12px;">建议尺寸：700X350</div>
      </el-form-item>

      <el-form-item prop="shop_cate_id" label="经营类目:">
       <el-select v-model="form.shop_cate_ids" multiple placeholder="留空为不限制" >
          <el-option
            v-for="item in cate"
            :key="item.id"
            :label="item.title"
            :value-key="item.id"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="lng" label="经度:">
        <el-input v-model="form.lng" placeholder="请输入经度" />
      </el-form-item>
      <el-form-item prop="lat" label="纬度:">
        <el-input v-model="form.lat" placeholder="请输入纬度" />
      </el-form-item>
      <el-form-item prop="is_open" label="店铺开关:">
        <el-switch v-model="form.is_open" />
      </el-form-item>
      <el-form-item prop="avg_appraise" label="评价(1-5):">
        <!-- <el-input v-model="form.avg_appraise" placeholder="请输入评价(1-5)" /> -->
        <el-rate
          v-model="form.avg_appraise"
          style="margin-top: 10px;"
          show-text
          :colors="colors"
        />
      </el-form-item>
      <el-form-item>
         <router-link v-if="apply" :to="'../check_form/'+apply">
            <el-button
              type="primary"
              style="margin-left:0px"
            >审核详情</el-button>
          </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {get} from '@/utils/request'
export default {
  name:"shop_form",
  data() {
    return {
      is_change: undefined,
      props: {
          lazy: true,
          value:'id',
          label:'name',
          lazyLoad (node, resolve) {
            const { level ,value} = node;
            let data={parent_id:value}
            get("/pub/Common/get_region", data, "POST").then((e) => {
              let nodes=e.list
              if(level==2){
                for(let i in nodes){
                  nodes[i].leaf=true
                }
              }
              resolve(nodes);
            })
          }
        },
      // background_vis: false,
      // background_img: '',
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      id: 0,
      apply: null,
      options_cate: [],
      city_ids: [],
      options_ctity: [],
      cate: [],
      shop_cate_id: [],
      form: {
        title: "",
        account: "",
        is_system: false,
        sub_title: "",
        cate_id: 1,
        description: "",
        thumb: "",
        address: "",
        tel: "",
        status: true,
        auto_check: false,
        city_id: 0,
        goods_count: 20,
        logo: "",
        background: "",
        lng: "",
        lat: "",
        is_open: true,
        avg_appraise: 0,
        user: {account:''},
      },
      rules: {
        account : [{ required: true, message: "请输入登录账户", trigger: "blur" }],
        title: [{ required: true, message: "请输入店铺名", trigger: "blur" }],
        tel: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        lng: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
        lat: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
        address: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {

    onSubmit(formName) {
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.is_system === true ? (form.is_system = 1) : (form.is_system = 0);
          form.is_open === true ? (form.is_open = 1) : (form.is_open = 0);
          form.status === true ? (form.status = 1) : (form.status = 0);
          form.auto_check === true ? (form.auto_check = 1) : (form.auto_check = 0);

          if(this.city_ids.length>2){
            form.city_id=this.city_ids[this.city_ids.length-1]
          }


          this.get("/admin/Shop/save", form, "POST").then((e) => {
            this.$back();
          });
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    bk() {
      this.$router.back();
    },
    init_into() {
      const that=this
      this.get("/admin/Shop/info?id=" + this.id, this.form, "POST").then(
        (e) => {
          this.cate = e.cate;
          if(e.apply)
          this.apply = e.apply;
          if(this.id>0){
            const tpl = e.info;
            this.form=tpl
            this.form.is_system=Number(tpl.is_system) === 1
            this.form.is_open=Number(tpl.is_open) == 1
            this.form.status=Number(tpl.status) == 1
            this.form.auto_check=Number(tpl.auto_check) == 1
            this.city_ids=this.form.city_id
            for(var i in tpl.shop_cate_ids){
              this.form.shop_cate_ids[i]=Number(tpl.shop_cate_ids[i])
            }
            if(this.form.user==undefined){
              this.form.user={account:''}
            }
          }
          setTimeout(()=>{this.is_change=false},100)
        }
      );
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
